<template>
    <div>
        <Title>ERP预售商品销售订单</Title>
        <NuxtLayout name="common">
            <div class="erp-box mt-[30px]">
                <t-card title="销售订单列表" :bordered="false">
                    <span v-if="isGoodsMaps">
                        <t-list>
                            <t-list-item >
                                <b>某次的预售订单自动生成的销售订单</b>
                                <template #action>
                                    <t-button theme="primary" hover="color" style="margin-left: 16px"
                                        @click="showOrderDetail"> 详情 </t-button>
                                </template>
                            </t-list-item>
                        </t-list>
                    </span>
                    <span v-else>
                        不存在销售订单，无需查看
                    </span>
                </t-card>
            </div>
            <client-only>
                <div class="dialog-box">
                    <t-dialog v-model:visible="isShowDetail" header="详情" width="50%" :on-close="close">
                        <span class="text-lg block font-[600]">品名</span>
                        <span class="block" v-for="(item, index) in detailContent.data">{{ item.goods_title
                            }}----------------{{ item.number }}件</span>
                    </t-dialog>
                </div>
            </client-only>
        </NuxtLayout>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

// 是否显示详情
const isShowDetail = ref(false);

// 详情内容
const detailContent = reactive({
    data: {
        content: {
            username: '张三',
            phone: '13800138000',
            address: '重庆市北碚区蔡家岗街道倍都佳园D区'
        },
        goods_list: [],
        sale: {
            order_number: '',
            order_time: '',
            order_from: ''
        },
        out_warehouse: {
            warehouse_name: '',
            out_number: '',
            out_time: '',
            express_number: '',
        }
    }
});

// 关闭dialog
const close = () => {
    isShowDetail.value = false
}

// 点击显示详情按钮
const showOrderDetail = (index) => {
    // 获取本地订单表
    let goodsMaps = localStorage.getItem('goodsMaps') || [];
    goodsMaps = JSON.parse(goodsMaps);

    detailContent.data = goodsMaps;
    isShowDetail.value = true
}

// 是否存在销售订单
const isGoodsMaps = ref(false);

// 销售订单列表
const goodsMapsLists = ref([]);

// 获取本地订单
const __initiaze = () => {
    // 获取本地订单
    let goodsMaps = localStorage.getItem('goodsMaps');
    if (goodsMaps === null) { // 无本地订单
        isOrder.value = false;
    } else { // 有本地订单
        goodsMapsLists.value = JSON.parse(goodsMaps);
        isGoodsMaps.value = true;
    }
}

onMounted(() => {
    setInterval(() => {
        __initiaze()
    }, 5000)
})
</script>

<style scoped></style>